<template>
  <je-modal
    v-if="visible"
    v-model:visible="visible"
    class="addMenu"
    width="620px"
    :title="`添加${formState.title}`"
    height="auto"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="handleOk"
    @close="handleClose"
  >
    <je-form
      ref="formRef"
      :rules="rules"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :colon="false"
      size="small"
      item-style="margin-bottom:6px;"
    >
      <div v-if="formState.MENU_NODEINFOTYPE === 'MENU'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled>
            <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
              {{ item.text }}
            </je-select-option>
          </je-select>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> [openChild](菜单默认展开全部，可省略) </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'MT'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled class="select">
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showFunctionModal"> 选择功能 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> 功能编码 </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'DIC'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled class="select">
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showModal()"> 选择字典 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> 字典编码。例如：JE_DEMO_TYPE </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'IDDT'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled>
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showModal()"> 选择插件 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> 微应用编码 </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'CHART'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled class="select">
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showModal()"> 选择图表 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> 图表编码,隐藏查询信息,图表默认参数 </p>
            <br />
            <h3 class="title"> 隐藏查询信息: </h3>
            <p class="p"> 可以隐藏查询区域,top|left|all </p>
            <br />
            <h3 class="title"> 图表默认参数: </h3>
            <p class="p"> 图表默认参数Object格式,如:{a:'',b:'',...} </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'REPORT'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled class="select">
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showModal()"> 选择报表 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"
              >自定义功能编码,报表编码,隐藏查询信息,报表默认参数,填报报表是否编辑,填报报表默认值</p
            >
            <br />
            <h3 class="title"> 隐藏查询信息： </h3>
            <p class="p"
              >当给报表参数设置了默认值后,可以隐藏查询工具条,true|false
              参数是Object格式,如:{params:'val'} 填报报表是否编辑：true|false
              填报报表默认值：Object格式,如:{field:'val'}</p
            >
          </div>
        </je-form-item></div
      >

      <div v-if="formState.MENU_NODEINFOTYPE === 'PORTAL'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <div class="selectWrap">
            <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled class="select">
              <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
                {{ item.text }}
              </je-select-option>
            </je-select>
            <je-button class="btn" @click="showModal()"> 选择门户 </je-button>
          </div>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p">功能编码 </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'URL'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled>
            <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
              {{ item.text }}
            </je-select-option>
          </je-select>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"> 链接地址。例如：http://www.jepaas.com </p>
          </div>
        </je-form-item>
      </div>

      <div v-if="formState.MENU_NODEINFOTYPE === 'IFRAME'">
        <je-form-item label="名称" name="MENU_MENUNAME">
          <je-input v-model:value.trim="formState.MENU_MENUNAME" autocomplete="off" />
        </je-form-item>

        <je-form-item label="图标" name="MENU_ICON">
          <je-icon v-model:value="formState.MENU_ICON" />
        </je-form-item>

        <!-- <je-form-item label="图标颜色">
          <je-color v-model:value="formState.MENU_FONTICONCOLOR" />
        </je-form-item> -->

        <je-form-item label="类型" name="MENU_NODEINFOTYPE">
          <je-select v-model:value="formState.MENU_NODEINFOTYPE" disabled>
            <je-select-option v-for="(item, index) in arrMenu" :key="index" :value="item.code">
              {{ item.text }}
            </je-select-option>
          </je-select>
        </je-form-item>

        <je-form-item label="所属服务" name="SY_PRODUCT_CODE">
          <je-select
            v-model:value.trim="formState.SY_PRODUCT_CODE"
            :options="productSelect"
            @change="changeProduct"
          ></je-select>
        </je-form-item>

        <je-form-item label="配置信息" name="MENU_NODEINFO">
          <je-textarea v-model:value="formState.MENU_NODEINFO" allow-clear :rows="4" />
        </je-form-item>

        <je-form-item label="&nbsp;" name="MENU_PROMPT">
          <div class="info">
            <h3 class="title"> 配置信息说明： </h3>
            <p class="p"
              >自定义编码,链接地址(支持系统变量嵌入)。例如：000A,http://www.jepaas.com?userId='{@USER_ID@}'</p
            >
          </div>
        </je-form-item>
      </div>
    </je-form>
  </je-modal>
  <div v-if="showSelectFunction">
    <je-select-function
      :visble="showSelectFunction"
      @changeModal="changeModal"
    ></je-select-function>
  </div>
</template>

<script>
  import { ref, reactive, toRaw, toRefs, defineComponent, onBeforeMount, watch } from 'vue';
  import { Input, Select, Button } from 'ant-design-vue';
  import { Modal, Icon, Form } from '@jecloud/ui';

  import { SelectWindow } from '@jecloud/func';

  import { useStore } from '@/store/app-store';

  import emitter from '@/eventBus';

  import { getDDItemList, loadDDItemByCodes } from '@jecloud/utils';

  import SelectFunction from '@/components/menu/function.vue';

  import { doSaveMenu, getProDuct } from '@/api';

  const getFormState = () => {
    return {
      MENU_BADGETYPE: 'sql',
      MENU_BADGELOAD: 'load',
      MENU_MENUNAME: '',
      MENU_ICON: 'fal fa-poll-h',
      MENU_FONTICONCOLOR: '',
      MENU_NODEINFOTYPE: undefined,
      MENU_NODEINFO: '',
      title: '',
      SY_PRODUCT_CODE: '',
      SY_PRODUCT_NAME: '',
      SY_PRODUCT_ID: '',
    };
  };

  export default defineComponent({
    name: 'AddMenu',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JeInput: Input,
      JeTextarea: Input.TextArea,
      JeButton: Button,
      JeIcon: Icon,
      // JeColor: Color,
      JeSelectFunction: SelectFunction,
    },
    setup(props, { emit }) {
      const state = reactive({
        store: useStore(),
        visible: false,
        formRef: ref(),
        formState: getFormState(),
        labelCol: {
          style: { width: '120px', margin: '0 2px 0 0' },
        },
        wrapperCol: {
          style: { margin: '0 50px 0 0' },
        },
        rules: {
          MENU_MENUNAME: [
            { required: true, message: '请输入名称' },
            { max: 40, message: '不能大于40个字符' },
            { pattern: '^[^\\\\/*?:"\'<>|\x22]+$', message: '不能输入非法字符' },
          ],
          // MENU_NODEINFO: [{ required: true, message: '请输入配置信息' }],
          SY_PRODUCT_CODE: [{ required: true, message: '请选择所属服务信息' }],
        },
        arrMenu: [],
        productSelect: [],
        showSelectFunction: false,
      });
      watch(
        () => state.formState.MENU_NODEINFOTYPE,
        (val) => {
          if (val == 'MENU') {
            state.rules.MENU_NODEINFO = [{ required: false }];
          } else {
            state.rules.MENU_NODEINFO = [{ required: true, message: '请输入配置信息' }];
          }
        },
        { deep: true, immediate: true },
      );
      const methods = {
        changeModal(obj) {
          state.showSelectFunction = false;
          if (Object.keys(obj).length) {
            state.formState.MENU_NODEINFO = obj.FUNCINFO_FUNCCODE;
            state.formState.SY_PRODUCT_NAME = obj.PRODUCT_NAME;
            state.formState.SY_PRODUCT_CODE = obj.PRODUCT_CODE;
            state.formState.SY_PRODUCT_ID = obj.JE_PRODUCT_MANAGE_ID;
            state.formState.MENU_MENUNAME = obj.FUNCINFO_FUNCNAME;
          }
        },
        // 获取产品
        getProductData() {
          getProDuct({
            tableCode: 'JE_PRODUCT_MANAGE',
            funcCode: 'JE_PLATFORM_PRODUCT_MANAGE',
            j_query: JSON.stringify({
              order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
              custom: [
                {
                  code: 'PRODUCT_ENABLE_STATE',
                  value: 1,
                  type: '=',
                  cn: 'and',
                },
              ],
            }),
          })
            .then((res) => {
              if (res.success) {
                const data = res.data.rows || [];
                data.forEach((item) => {
                  const { PRODUCT_NAME, PRODUCT_CODE, JE_PRODUCT_MANAGE_ID } = item;
                  state.productSelect.push({
                    label: PRODUCT_NAME,
                    value: PRODUCT_CODE,
                    JE_PRODUCT_MANAGE_ID,
                  });
                });
              }
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
        changeProduct(value, item) {
          state.formState.SY_PRODUCT_NAME = item.label;
          state.formState.SY_PRODUCT_CODE = value;
          state.formState.SY_PRODUCT_ID = item.JE_PRODUCT_MANAGE_ID;
        },
        // 显示当前弹窗
        showCurrentModal(obj) {
          state.visible = true;
          state.formState.title = obj.title;
          state.formState.MENU_NODEINFOTYPE = obj.type;
        },

        // 打开弹窗
        showModal() {
          let title = '';
          let type = '';
          let configInfo = '';
          let querys = [];

          const nodeInfoType = state.formState.MENU_NODEINFOTYPE;
          if (nodeInfoType === 'MT') {
            title = '选择功能';
            type = 'tree';
            configInfo =
              'JE_CORE_FUNCINFO,MENU_NODEINFO~MENU_MENUNAME~MENU_MENUSUBNAME,code~text~bean.FUNCINFO_FUNCNAME_EN,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
              {
                code: 'FUNCINFO_NODEINFOTYPE',
                type: '!=',
                value: 'FUNCFIELD',
              },
            ];
          } else if (nodeInfoType === 'DIC') {
            title = '选择字典';
            type = 'grid';
            configInfo =
              'JE_CORE_DICTIONARY,MENU_NODEINFO~MENU_MENUNAME,DICTIONARY_DDCODE~DICTIONARY_DDNAME,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
              {
                code: 'DICTIONARY_DDTYPE',
                type: 'notIn',
                value: ['CUSTOM', 'SQL', 'SQL_TREE', 'DYNA_TREE'],
              },
            ];
          } else if (nodeInfoType === 'CHART') {
            title = '选择图表';
            type = 'tree';
            configInfo = 'JE_CORE_CHARTS,MENU_NODEINFO~MENU_MENUNAME,code~text,S,';
            querys = [
              // {
              //   code: 'SY_JESYS',
              //   type: '=',
              //   value: '1',
              // },
            ];
          } else if (nodeInfoType === 'REPORT') {
            title = '选择报表';
            type = 'tree';
            configInfo = 'JE_CORE_REPORT,MENU_NODEINFO~MENU_MENUNAME,code~text,S,';
            querys = [
              {
                code: 'SY_JESYS',
                type: '=',
                value: '1',
              },
            ];
          } else if (nodeInfoType === 'PORTAL') {
            title = '选择门户';
            type = 'grid';
            configInfo = 'JE_CORE_PORTAL_ENGINE,MENU_NODEINFO~MENU_MENUNAME,code~text,S,';
            querys = [
              //   {
              //     code: 'PROTAL_JHFS_CODE',
              //     type: '=',
              //     value: 'func',
              //   },
              //   {
              //     code: 'PROTAL_QY_CODE',
              //     type: '=',
              //     value: '1',
              //   },
              {
                code: 'ENGINE_ENABLE_CODE',
                type: '=',
                value: '1',
              },
            ];
          } else if (nodeInfoType === 'IDDT') {
            title = '选择插件';
            type = 'grid';
            configInfo =
              'JE_META_MICROAPP,MENU_NODEINFO~MENU_MENUNAME,MICROAPP_CODE～MICROAPP_NAME,S,';
            querys = [
              {
                code: 'SY_STATUS',
                type: '=',
                value: '1',
              },
              {
                code: 'MICROAPP_ACTIVETYPE',
                type: '=',
                value: 'menu',
              },
            ];
          }
          SelectWindow.show({
            title,
            type,
            configInfo,
            querys,
            callback: function ({ rows, config, $modal }) {
              let data = rows[0];

              if (nodeInfoType === 'MT') {
                state.formState.MENU_MENUNAME = data.text;
                state.formState.MENU_NODEINFO = data.code;
              } else if (nodeInfoType === 'DIC') {
                state.formState.MENU_MENUNAME = data.DICTIONARY_DDNAME;
                state.formState.MENU_NODEINFO = data.DICTIONARY_DDCODE;
              } else if (nodeInfoType === 'CHART') {
                state.formState.MENU_MENUNAME = data.bean.CHARTS_TEXT;
                state.formState.MENU_NODEINFO = data.bean.CHARTS_CODE;
                //存在产品信息
                if (data.bean.SY_PRODUCT_CODE) {
                  state.formState.SY_PRODUCT_CODE = data.bean.SY_PRODUCT_CODE; //服务编码
                  state.formState.SY_PRODUCT_NAME = data.bean.SY_PRODUCT_NAME; //服务名称
                  state.productSelect.forEach((productItem) => {
                    if (productItem.value == data.bean.SY_PRODUCT_CODE) {
                      state.formState.SY_PRODUCT_ID = productItem.JE_PRODUCT_MANAGE_ID; //服务id
                    }
                  });
                }
              } else if (nodeInfoType === 'REPORT') {
                state.formState.MENU_MENUNAME = data.text;
                state.formState.MENU_NODEINFO = 'JE_REPORT_' + data.code + ',' + data.code;
              } else if (nodeInfoType === 'PORTAL') {
                state.formState.MENU_MENUNAME = data.ENGINE_TITLE; //菜单名称
                state.formState.MENU_NODEINFO = data.ENGINE_CODE; //配置信息
                state.formState.SY_PRODUCT_CODE = data.SY_PRODUCT_CODE; //服务编码
                state.formState.SY_PRODUCT_NAME = data.SY_PRODUCT_NAME; //服务名称
                state.productSelect.forEach((productItem) => {
                  if (productItem.value == data.SY_PRODUCT_CODE) {
                    state.formState.SY_PRODUCT_ID = productItem.JE_PRODUCT_MANAGE_ID; //服务id
                  }
                });
              } else if (nodeInfoType === 'IDDT') {
                state.formState.MENU_MENUNAME = data.MICROAPP_NAME;
                state.formState.MENU_NODEINFO = data.MICROAPP_CODE;
              }
            },
          });
        },

        // 取消
        handleClose() {
          state.visible = false;
          state.formRef.resetFields();

          // 表单数据重置
          Object.assign(state.formState, getFormState());
        },

        // 提交
        handleOk(btn) {
          state.formRef
            .validate()
            .then(() => {
              methods.handleSave(btn);
            })
            .catch((error) => {
              console.error(error);
            });
          return false;
        },
        // 选择功能
        showFunctionModal() {
          state.showSelectFunction = true;
        },
        handleSave(btn) {
          btn.loading = true;
          const vals = toRaw(state.formState);
          const menuNode = state.store.menuNode;
          doSaveMenu({
            ...vals,
            tableCode: 'JE_CORE_MENU',
            SY_PARENT: state.formState.title === '模块' ? 'ROOT' : menuNode.id,
            SY_PATH: state.formState.title === '模块' ? 'ROOT' : menuNode.nodePath,
          })
            .then((res) => {
              Modal.notice(res.message, 'success');

              methods.handleClose();

              btn.loading = false;

              emitter.emit('checkedMenu', {
                id: res.data.JE_CORE_MENU_ID,
              });
            })
            .catch((error) => {
              btn.loading = false;

              Modal.alert(error.message, 'error');
            });
        },
      };
      onBeforeMount(() => {
        loadDDItemByCodes(['JE_MENU_TYPE']).then(() => {
          const list = getDDItemList('JE_MENU_TYPE');
          list.unshift({
            code: 'MENU',
            text: '模块',
            icon: 'jeicon jeicon-title',
          });
          state.arrMenu = list;
        });
        methods.getProductData();
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>

<style lang="less">
  .addMenu {
    .selectWrap {
      position: relative;
      display: flex;
      .btn {
        position: absolute;
        top: 0;
        right: 0;
      }
      .ant-select-arrow {
        right: 100px;
      }
    }
  }
</style>

<style lang="less" scoped>
  .addMenu {
    .info {
      padding: 5px 10px 10px 10px;
      border: 1px solid #a8d09d;
      background: #eff9f2;
      color: #36761f;
      font-size: 14px;
      .title {
        margin: 0;
        color: #36761f;
        font-size: 14px;
        font-weight: normal;
      }
      .p {
        margin: 4px 0 0 0;
        line-height: 20px;
      }
    }
  }
</style>
